<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="onCreated" />
  </div>
</template>

<script>
import Vue from 'vue'
import {
  Editor,
  Toolbar
} from '@wangeditor/editor-for-vue'


export default Vue.extend({

  components: {
    Editor,
    Toolbar
  },
  data() {
    return {
      // imgUrl:'',
      // uploadurl:'',
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: {}, //工具栏配置
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 所有的菜单配置，都要在 MENU_CONF 属性下
        },
      },
      mode: 'default', // or 'simple'

    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.uploadurl = this.Picurlprefix.requestUploadPrefix;
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor) {
      console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
    },
    insertTextHandler() {
      const editor = this.editor
      if (editor == null) return
      editor.insertText(' hello ')
    },
    printEditorHtml() {
      const editor = this.editor
      if (editor == null) return
      // console.log(editor.getHtml())
    },
    disableHandler() {
      const editor = this.editor
      if (editor == null) return
      editor.disable()
    },

  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
})
</script>

<style src="@wangeditor/editor/dist/css/style.css">

</style>
